<template>
  <Echart :options="option" :width="width" :height="height"></Echart>
</template>

<script setup lang="ts">
import Echart from "@/components/Echart.vue";
import { ref } from "vue";

const width = "100%";
const height = "100%";
let option = ref({
    legend: {
    bottom: '10',
    left: '30%'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
    tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: "pie",
      radius: [40, 120],
      center: ["50%", "50%"],
      roseType: "area",
      itemStyle: {
        borderRadius: 8,
      },
      data: [
        { value: 40, name: "rose 1" },
        { value: 38, name: "rose 2" },
        { value: 32, name: "rose 3" },
        { value: 30, name: "rose 4" },
      ],
      label: {
        color: '#fff',
        fontSize:'16'
      },
      labelLine: {
        lineStyle: {
          color: '#fff'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
    },
  ],
});
</script>

<style scoped></style>
